<!-- 后台目录首页 -->
<template>
    <div>
        <!-- 后台目录首页 数据统计 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="box-card" shadow="hover">
                    <div class="text-left">
                        <i class="el-icon-user-solid border h5"
                            style="width: 40px; height: 40px; text-align: center; line-height: 40px;"></i>
                            &nbsp; 展示区1
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card" shadow="hover">
                    <div class="text-left">
                        <i class="el-icon-s-goods border h5"
                            style="width: 40px; height: 40px; text-align: center; line-height: 40px;"></i>
                            &nbsp;展示区2
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card" shadow="hover">
                    <div class="text-left">
                        <i class="el-icon-upload border h5"
                            style="width: 40px; height: 40px; text-align: center; line-height: 40px;"></i>
                            &nbsp;展示区3
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card" shadow="hover">
                    <div class="text-left">
                        <i class="el-icon-s-data border h5"
                            style="width: 40px; height: 40px; text-align: center; line-height: 40px;"></i>
                            &nbsp;展示区4
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 店铺、订单提示|统计图 -->
        <!-- 店铺提示图 -->
        <el-row :gutter="24" class="mt-3">
            <el-col :span="12" class="d-flex flex-column" style="height: 470px;">
                <!-- <el-card class="box-card mb-auto" shadow="hover" style="height: 220px;">
                    <div slot="header">
                        <span>店铺以及商品提示</span>
                        <el-button class=" float-right" size="mini" type="text">更多</el-button>
                    </div>
                    <div class="row">
                         <div class="col-3">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                         </div>
                         <div class="col-3">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                         </div>
                         <div class="col-3">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                         </div>
                         <div class="col-3">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                         </div>
                    </div>
                </el-card> -->
                <el-card class="box-card mb-auto" shadow="hover" style="height: 220px; justify-content: space-between;"
                    v-for="(tip) in tips" :key="tip.id">
                    <div slot="header">
                        <span>{{ tip.title }}</span>
                        <el-button class=" float-right" size="mini" type="text">{{ tip.desc }}</el-button>
                    </div>
                    <div class="row">
                        <div class="col-3" v-for="(tlist, tlisti) in tip.list" :key="tlisti">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">{{ tlist.value }}</h4>
                                <small class="text-muted">{{ tlist.name }}</small>
                            </button>
                        </div>
                    </div>
                </el-card>


                <!-- 订单提示图 -->
                <!-- <el-card class="box-card" shadow="hover" style="height: 220px;">
                    <div slot="header">
                        <span>交易提示</span>
                        <el-button class=" float-right" size="mini" type="text">更多</el-button>
                    </div>
                    <div class="row">
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">64</h4>
                                <small class="text-muted">出售中</small>
                            </button>
                        </div>
                    </div>
                </el-card> -->
                <el-card class="box-card mb-auto" shadow="hover" style="height: 220px; justify-content: space-between;"
                    v-for="(tip, ti) in tips" :key="ti">
                    <div slot="header">
                        <span>{{ tip.title }}</span>
                        <el-button class=" float-right" size="mini" type="text">{{ tip.desc }}</el-button>
                    </div>
                    <div class="row">
                        <div :class="tip.list2.length | getCol" v-for="(tlist, tlisti) in tip.list2" :key="tlisti">
                            <!-- <div class="col-3" v-for="(tlist, tlisti) in tip.list2" :key="tlisti"> -->
                            <button class="btn btn-light w-100">
                                <h4 class="mb-1">{{ tlist.value }}</h4>
                                <small class="text-muted">{{ tlist.name }}</small>
                            </button>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <!-- 统计图的card -->
            <el-col :span="12">
                <el-card class="box-card" shadow="hover" style="height: 455px; justify-content: space-between;">
                    <div slot="header">
                        <span>卡片名称</span>
                        <el-button class=" float-right" size="mini" type="text">操作按钮</el-button>
                    </div>
                    <!-- 统计图容器 -->
                    <div ref="myChart" style="width: 100%;height:370px;"></div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 销售情况统计 | 单品销售排名 -->
        <el-row :gutter="20" class="mb-3000">
            <el-col :span="12">
                <el-card class="box-card" shadow="hover" style="height: 455px; justify-content: space-between;">
                    <div slot="header">
                        <span>卡片名称</span>
                        <el-button class=" float-right" size="mini" type="text">操作按钮</el-button>
                    </div>
                    <div class="media align-items-center border">
                        <span class="border-right py-4 px-3 bg-light">昨日销量</span>
                        <div class="media-body">
                            <div class="border-bottom pl-3 pb-2 mb-2">
                                <span>订单量: 19</span>
                            </div>
                            <div class="pl-3 mt-2">
                                <span>订单量: 19</span>
                            </div>
                        </div>
                    </div>

                    <div class="media align-items-center border mt-3">
                        <span class="border-right py-4 px-3 bg-light">昨日销量</span>
                        <div class="media-body">
                            <div class="border-bottom pl-3 pb-2 mb-2">
                                <span>订单量: 30</span>
                            </div>
                            <div class="pl-3 mt-2">
                                <span>订单量: 30</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card" shadow="hover" style="height: 455px; justify-content: space-between;">
                    <div slot="header">
                        <span>商品排列名称</span>
                        <el-button class=" float-right" size="mini" type="text">操作按钮</el-button>
                    </div>
                    <el-table :data="tableData" style="width: 100%" height="250">
                        <el-table-column type="index" prop="" label="#" style="width: 25%;" />
                        <el-table-column prop="name" label="商品信息" style="width: 50%;" />
                        <el-table-column prop="num" label="销量" style="width: 25%;" />
                    </el-table>
                </el-card>
            </el-col>

        </el-row>
    </div>
</template>
<script>
import * as echarts from 'echarts';  // 完整引入
export default {
    name: "BackendIndex",
    data() {
        return {
            // 优化card中的重复代码
            tips: [
                {
                    title: '店铺以及商品展示',
                    desc: "需要关注的以及待处理事项",
                    list: [
                        {
                            value: 64,
                            name: "出售中",
                        },
                        {
                            value: 45,
                            name: "出售中",
                        },
                        {
                            value: 43,
                            name: "出售中",
                        }, {
                            value: 109,
                            name: "出售中",
                        },
                    ],
                    list2: [
                        {
                            value: 64,
                            name: "出售中",
                        },
                        {
                            value: 45,
                            name: "出售中",
                        },
                        {
                            value: 43,
                            name: "出售中",
                        },
                        {
                            value: 109,
                            name: "出售中",
                        },
                        {
                            value: 109,
                            name: "出售中",
                        },
                        {
                            value: 109,
                            name: "出售中",
                        },
                    ],
                },
            ],

            tableData: [{
                name:"商品名称1",
                num: 64,  
            }, {
                name:"商品名称1",
                num: 64, 
            }, {
                name:"商品名称1",
                num: 64,   
            }, {
                name:"商品名称1",
                num: 64, 
            }, {
                name:"商品名称1",
                num: 64, 
            }, {
                name:"商品名称1",
                num: 64, 
            }, {
                name:"商品名称1",
                num: 64, 
            }]
        }
   },
    filters: {
        getCol(total) {
            // 计算列数
            return `col-${12 / total}`;
        }
    },
    // dom渲染完毕后运行的
    mounted() {
        // 统计图制作
        this.$nextTick(() => {
            this.drawLine();
        });
    },
    methods: {
        drawLine() {
            // 1. 基于准备好的dom，初始化echarts实例
            let mychart = echarts.init(this.$refs.myChart);
            // 2. 指定图表的配置项和数据
            mychart.setOption({
                title: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            });

        }
    }
}
</script>